<template>
  <div class="pad-l-20 pad-r-20 circle-2-tab">
    <el-tabs class="circle-2-tab" v-model="activeName">
      <el-tab-pane label="编辑商品基础信息" name="1"  >
        <!-- 商品信息 -->
        <goods-info :dict="dict" ref="goodsInfo" ></goods-info>
        <!-- 商品价格库存 -->
        <goods-price :dict="dict" ref="goodsPrice"></goods-price>
        <!-- 商品其它 -->
        <goods-other :dict="dict" ref="goodsOther"></goods-other>
        <el-form class="text-c" style="margin-top: -12px;">
          <el-form-item>
            <div class="mar-t-10 mar-b-10">
              <el-button type="primary" @click="saveGoodsInfo">保存</el-button>
              <el-button @click="activeName = '2'">下一步</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="编辑商品详情信息" name="2">
        <!-- 商品参数 -->
        <goods-parameter ref="goodsParameter"></goods-parameter>
        <!-- 商品详情 -->
        <goods-detail ref="goodsDetail" ></goods-detail>
        <el-form class="text-c" style="margin-top: -12px;">
          <el-form-item>
            <div class="mar-t-10 mar-b-10">
              <el-button @click="activeName = '1'">上一步</el-button>
              <el-button type="primary" @click="saveGoodsInfo">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import goodsInfo from './components/goods-info'
  import goodsPrice from './components/goods-price'
  import goodsOther from './components/goods-other'
  import goodsParameter from './components/goods-parameter'
  import goodsDetail from './components/goods-detail'
  import { getDictByGroupName } from '@/api/common/common'
  import { saveAuditGoods, getAuditGoodsDetail } from '@/api/goods/auditGoods'

  export default {
    components: { goodsInfo, goodsPrice, goodsOther, goodsParameter, goodsDetail },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        activeName: '1',
        tabDisabled: true,
        enterpriseId: this.getEnterpriseId(),
        dict: {},
        auditGoodsId: '',
        templateId: null,
        listLoading: false
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      const auditGoodsId = queryParams.auditGoodsId
      if (auditGoodsId) {
        this.auditGoodsId = auditGoodsId
      }
    },
    mounted() {
      if (this.auditGoodsId) {
        this.initGoodsInfo()
      } else {
        this.$refs.goodsDetail.detailsBoolean = true
      }
      this.initDict()
      // 监听
      this.busMonitor()
    },
    methods: {
      busMonitor() {
        // 文本表单值设置
        const that = this
        this.$bus.$on('ComponentTemplate.templateId.content', function(data) {
          that.templateId = data
          that.saveDate()
        })
      },
      initDict() {
        getDictByGroupName('ProjectGoodsDTO').then(response => {
          this.dict = response.data
        })
      },
      initGoodsInfo() {
        getAuditGoodsDetail(this.auditGoodsId).then((response) => {
          this.$bus.$emit('goods.edit.data', response.data)
        })
      },
      saveGoodsInfo() {
        // 校验
        let checkRet = true
        // 基础信息校验
        checkRet = this.$refs.goodsInfo.checkForm()
        if (!checkRet) {
          return
        }
        // 价格组件校验
        checkRet = this.$refs.goodsPrice.checkForm()
        if (!checkRet) {
          return
        }
        // 其他组件校验
        checkRet = this.$refs.goodsOther.checkForm()
        if (!checkRet) {
          return
        }
        // 保存模板
        this.$refs.goodsDetail.saveTemplate()
      },
      saveDate() {
        // 排序
        const sortNo = this.$refs.goodsInfo.form.sortNo
        const title = this.$refs.goodsInfo.form.title
        const unit = this.$refs.goodsInfo.form.unit
        // 商品类型 1: 实物商品, 2: 批发商品
        const goodsType = this.$refs.goodsInfo.form.goodsType
        // 图片集合
        const goodsImages = this.$refs.goodsInfo.form.goodsImages
        // 商品分类Id
        const goodscategoryIds = this.$refs.goodsInfo.form.goodscategoryIds
        const labelTypes = this.$refs.goodsInfo.form.labelTypes
        const oneCategoryId = goodscategoryIds[0]
        const twoCategoryId = goodscategoryIds[1]
        const threeCategoryId = goodscategoryIds[2]
        const skuFlag = this.$refs.goodsPrice.form.skuFlag
        const supplyPrice = this.$refs.goodsPrice.form.supplyPrice

        const stock = this.$refs.goodsPrice.form.stock
        const stockWarn = this.$refs.goodsPrice.form.stockWarn
        const postFee = this.$refs.goodsOther.form.postFee
        const goodsStatus = this.$refs.goodsOther.form.goodsStatus
        const goodsParameters = this.$refs.goodsParameter.form.goodsParameters
        const enterpriseId = this.enterpriseId
        const templateId = this.templateId

        const unrealSalesNum = this.$refs.goodsPrice.form.unrealSalesNum
        const qualityData = this.$refs.goodsPrice.form.qualityData
        const qualityTable = this.$refs.goodsPrice.form.qualityTable
        const shareImageUrl = this.$refs.goodsInfo.form.shareImageUrl

        const table = []
        if (qualityData.length === 1) {
          const auditSkuPropId = qualityData[0].auditSkuPropId
          const skuPropName = qualityData[0].skuPropName
          const singleTable = this.$refs.goodsPrice.form.singleTable
          for (let i = 0; i < singleTable.length; i++) {
            const imageUrl = this.$utils.isExist(singleTable[i].imageUrl) ? singleTable[i].imageUrl : ''
            const price = this.$utils.isExist(singleTable[i].price) ? singleTable[i].price : ''
            const skuSupplyPrice = this.$utils.isExist(singleTable[i].supplyPrice) ? singleTable[i].supplyPrice : ''
            const warnStock = this.$utils.isExist(singleTable[i].warnStock) ? singleTable[i].warnStock : ''
            const stock = this.$utils.isExist(singleTable[i].stock) ? singleTable[i].stock : ''

            const auditSkuPropValueId = singleTable[i].auditSkuPropValueId
            const skuPropValue = singleTable[i].skuPropValue

            const projectGoodsSkuDTO = {}
            projectGoodsSkuDTO.imageUrl = imageUrl
            projectGoodsSkuDTO.price = price
            projectGoodsSkuDTO.supplyPrice = skuSupplyPrice
            projectGoodsSkuDTO.warnStock = warnStock
            projectGoodsSkuDTO.stock = stock
            const skuPropValueList = []
            const propValue = {
              auditSkuPropId: auditSkuPropId,
              skuPropName: skuPropName,
              auditSkuPropValueId: auditSkuPropValueId,
              skuPropValue: skuPropValue
            }
            skuPropValueList.push(propValue)
            projectGoodsSkuDTO.skuPropValueList = skuPropValueList
            table.push(projectGoodsSkuDTO)
          }
        } else {
          for (let i = 0; i < qualityTable.length; i++) {
            const projectGoodsSkuDTO = { }
            const item = qualityTable[i]
            projectGoodsSkuDTO.imageUrl = this.$utils.isExist(item['imageUrl']) ? item['imageUrl'] : ''
            projectGoodsSkuDTO.price = this.$utils.isExist(item['price']) ? item['price'] : ''
            projectGoodsSkuDTO.supplyPrice = this.$utils.isExist(item['supplyPrice']) ? item['supplyPrice'] : ''
            projectGoodsSkuDTO.stock = this.$utils.isExist(item['stock']) ? item['stock'] : ''
            projectGoodsSkuDTO.warnStock = this.$utils.isExist(item['warnStock']) ? item['warnStock'] : ''
            const skuPropValueList = []
            for (const key in item) {
              if (this.$utils.isExist(item[key].auditSkuPropId)) {
                const auditSkuPropId = item[key].auditSkuPropId
                const skuPropName = item[key].skuPropName
                const skuPropValue = item[key].skuPropValue
                const auditSkuPropValueId = item[key].auditSkuPropValueId
                const projectGoodsSkuPropValueDTO = {
                  auditSkuPropId: auditSkuPropId,
                  skuPropName: skuPropName,
                  skuPropValue: skuPropValue,
                  auditSkuPropValueId: auditSkuPropValueId
                }
                skuPropValueList.push(projectGoodsSkuPropValueDTO)
              }
            }
            projectGoodsSkuDTO.skuPropValueList = skuPropValueList
            table.push(projectGoodsSkuDTO)
          }
        }

        const data = {
          enterpriseId: enterpriseId,
          sortNo: sortNo,
          auditType: 0,
          title: title,
          unit: unit,
          goodsType: goodsType,
          goodsImages: goodsImages,
          oneCategoryId: oneCategoryId,
          twoCategoryId: twoCategoryId,
          threeCategoryId: threeCategoryId,
          skuFlag: skuFlag,
          supplyPrice: supplyPrice,
          stock: stock,
          stockWarn: stockWarn,
          postFee: postFee,
          goodsStatus: goodsStatus,
          goodsParameters: goodsParameters,
          labelTypes: labelTypes,
          auditGoodsId: this.auditGoodsId,
          detailTemplateId: templateId,
          unrealSalesNum: unrealSalesNum,
          qualityData: qualityData,
          shareImageUrl: shareImageUrl,
          qualityTable: table
        }
        this.isSubmit = true
        if (!this.isSubmit) {
          return
        }
        this.listLoading = true

        this.loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        saveAuditGoods(data).then((response) => {
          this.listLoading = false
          this.loading.close()
          if (response.isError) {
            // this.isSubmit = false
            return
          }
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.$bus.$off('ComponentTemplate.templateId.content')
          this.$router.push('/goods/audit/index/')
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-form-item__content {
    .el-button {
      padding: 0;
      height: 34px;
      width: 139px;
    }
  }
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 130px;
    height: 130px;
    display: block;
  }
  .pic-bar{
    position: relative;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
  .bottom-btn{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
</style>
